<template>
  <TableToolbar>
    <template #bar-left>
      <p class="table-title mb-0">
        <BaiduSVG width="22px" height="22px" class="align-middle" />
        <span class="align-middle ml-1">百度标王</span>
      </p>
    </template>
  </TableToolbar>
  <p>
    <span class="font-bold text-black">标准版</span>
    <span class="font-normal text-neutral-400">（不含配图）请选择需要的平台*时段*时长</span>
  </p>
  <BwPriceTable
    v-model:typeCode="typeCode"
    :mobile-sold="mobileSold"
    :pc-sold="pcSold"
    :pc-disable="pcDisable"
    :mobile-disable="mobileDisable"
    :price-table="priceUtils.baiduTable.value"
    :xy="priceUtils.baiduCoordinates.value"
    :bwPriceInfo="bwPriceInfo"
    @cell-click="handleBaiduCellClick"
    @cibao-reset="() => emit('cibao-reset')"
    @bw-reset="() => emit('bw-reset')"
  />
  <div class="flex">
    <div class="mt-5">
      <BwCreativeCard
        :select="creativeSelect"
        :price-utils="priceUtils"
        :disabled="creativeDisabled"
        @on-click="handleCreativeSelect"
      />
    </div>
    <div class="ml-5 mt-5">
      <Bw360Card
        :select="qihu360Select"
        :price-utils="priceUtils"
        @on-click="handle360Select"
        @on-btn-click="handle360BtnClick"
      />
    </div>
  </div>
  <a-modal width="1000px" v-model:visible="visible" title="请选择360标王套餐" :footer="null">
    <BwPriceTable
      show-corner
      v-model:typeCode="typeCode"
      :price-table="priceUtils.qihu360Table.value"
      :xy="priceUtils.qihu360Coordinates.value"
      @cell-click="handle360CellClick"
      @cibao-reset="() => emit('cibao-reset')"
      @bw-reset="() => emit('bw-reset')"
    />
  </a-modal>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import BaiduSVG from '@/assets/svg/baidu.svg'
import TableToolbar from '@/components/table-toolbar/index.vue'
import BwPriceTable from '@/views/price-sheet/components/BwPriceTable.vue'
import Bw360Card from './Bw360Card.vue'
import BwCreativeCard from './BwCreativeCard.vue'
import { isNil } from 'lodash-es'
import { usePriceTable } from '@/views/price-sheet/hooks/usePriceTable'
import { type Coordinates, usePriceCoordinates } from '@/views/price-sheet/hooks/usePriceCoordinates'
import { useVModels, useVModel } from '@vueuse/core'
import type { BwPriceAskWords } from '@/services/price-sheet/getBwPriceAskWords'
import { ProductEnum } from '@/core/enums/platform'

interface Props {
  mobileSold: boolean
  pcSold: boolean
  coordinatesHook: ReturnType<typeof usePriceCoordinates>
  priceUtils: ReturnType<typeof usePriceTable>
  qihu360Select: boolean
  creativeSelect: boolean
  mobileDisable: boolean
  pcDisable: boolean
  bwPriceInfo: BwPriceAskWords
  type: ProductEnum
}

const props = withDefaults(defineProps<Props>(), {
  pcSold: false,
  mobileSold: false,
  pcDisable: false,
  mobileDisable: false,
  qihu360Select: false,
  creativeSelect: false
})

interface Emits {
  (e: 'cibao-reset'): void
  (e: 'bw-reset'): void
}
const emit = defineEmits<Emits>()

const typeCode = useVModel(props, 'type')

const visible = ref(false)
const { qihu360Select, creativeSelect } = useVModels(props)

function handleBaiduCellClick(coordinates: Coordinates) {
  props.coordinatesHook.setBaiduCoordinates(coordinates)

  // dataIndex为空说明用户没勾选百度标王，则取消创意配图的勾选
  if (isNil(coordinates[1])) {
    creativeSelect.value = false
  }
}

function handle360CellClick(coordinates: Coordinates) {
  props.coordinatesHook.set360Coordinates(coordinates)
}

const creativeDisabled = computed(() => {
  return !props.priceUtils.currentBaiduPriceData.value.dataIndex || (props.pcSold && props.mobileSold)
})

function handleCreativeSelect() {
  if (!creativeDisabled.value) {
    creativeSelect.value = !creativeSelect.value
  }
}

// 这个watch的触发主要是为了解决 创意配图被选中的情况下，切换版本，版本关键字已售出，则让创意配图取消选中
watch(
  () => creativeDisabled.value,
  (disabled) => {
    if (disabled) {
      creativeSelect.value = false
    }
  }
)

function handle360Select() {
  qihu360Select.value = !qihu360Select.value
}

function handle360BtnClick() {
  visible.value = true
}
</script>

<style lang="scss" scoped>
.table-title {
  color: #ff4d4f;
  font-weight: bold;
  font-size: 22px;
}
</style>
